<template>
    <div class="page-container">
        <div class="echarts-box">
            <BaseEcharts :options="options2"></BaseEcharts>
        </div>
        <div class="set-box">
            <SetTheme></SetTheme>
        </div>
    </div>
</template>
<script setup lang="ts">
import BaseEcharts from "@/components/BaseEcharts";
import SetTheme from "@/components/SetTheme";
import { type EChartsCoreOption } from "@/hooks/useEcharts";

const options2: EChartsCoreOption = {
    tooltip: {
        trigger: "axis",
    },

    grid: {
        left: "3%",
        right: "4%",
        bottom: "0%",
        top: "5%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["3-1", "3-2", "3-3", "3-4", "3-5", "3-6", "3-7"],
    },
    yAxis: {
        axisLabel: {
            formatter: function (val: number) {
                return val;
            },
        },
    },
    series: [
        {
            name: "微信",
            type: "line",
            data: [1232, 1065, 1630, 1520, 1865, 1846, 1956],
        },
        {
            name: "QQ",
            type: "line",
            data: [800, 965, 798, 1096, 1295, 1699, 1900],
        },
    ],
};
</script>
<style>
.page-container {
    width: 100vw;
    height: 100vh;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.echarts-box {
    width: 60%;
    height: 420px;
}
.set-box {
    width: 35%;
}
</style>
